<template>
    <div id="bigBox">
        <div class="banner-head">
            <van-swipe id="swipe" :autoplay="3000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img v-lazy="image.imgSrc" />
                </van-swipe-item>
            </van-swipe>
            <div class="search-head">
                <div class="search-left-head">
                    <a href="/citylist" class="search-city-left-head">
                        <div>
                            上海
                            <van-icon id="downIcon" size="12" name="play" />
                        </div>
                    </a>
                    <input type="text" placeholder="请输入小区或地址">
                </div>
                <div @click="$router.push('/mapfindroom')" class="search-right-head">
                    <van-icon size="24" name="location-o" />
                </div>
            </div>
        </div>
        <div class="icon-head">
            <van-grid router id="icon-icon">
                <van-grid-item to="/layoutAndaxios/findroom" icon="wap-home-o" text="整租" />
                <van-grid-item to="/layoutAndaxios/findroom" icon="friends-o" text="合租" />
                <van-grid-item to="/mapfindroom" icon="comment-o" text="地图找房" />
                <van-grid-item to="/rentout" icon="bullhorn-o" text="去出租" />
            </van-grid>
        </div>
        <div class="si-Room-Team">
            <van-cell-group>
                <van-cell id="siFangBgc" title="私房小组" value="更多" />
            </van-cell-group>
            <ul class="siList">
                <li v-for="(item,index) in SiFang" :key="item.id">
                    <div class="list-pic-left">
                        <img :src="item.imgSrc" alt="">
                    </div>
                    <div class="list-pic-right">
                        <span>{{item.title}}</span>
                        <i>{{item.desc}}</i>
                    </div>
                </li>
           </ul>
        </div>
    </div>
</template> 

<script>
import {getSweiperPicSweiper} from "@/api/HeadSwiper.js"
import {getSiRoomRoom} from "@/api/SiRoom.js"
export default {
    props: {

    },
    data() {
        return {
             images: [],
             SiFang: [],
        };
    },
    created() {
       this.getSwiperPic()
       this.getSiRoom()
    },
    components: {

    },
    methods: {
        // 获取Banner
        async getSwiperPic() {
            try {
                const list = await getSweiperPicSweiper()
                // console.log(list);
            const NewPicList = list.body.filter(item => item.imgSrc = `http://liufusong.top:8080${item.imgSrc}`)
            this.images = NewPicList
            } catch(e){
                console.log(e);
            }
        },
        // 获取私房列表
        async getSiRoom() {
            try {
                const list = await getSiRoomRoom()
                this.SiFang = list.body.filter(item=>item.imgSrc = `http://liufusong.top:8080${item.imgSrc}`)
            } catch (e) {
                console.log(e);
            }
        }
    },
};
</script>

<style scoped>
    #bigBox {
        background-color: #f6f5f6;
        width: 100%;
        height: 100%;
    }
    .banner-head {
        width: 100%;
        height: 212px;
        background-color: pink;
        position: relative;
    }
    #swipe {
        width: 100%;
        height: 100%;
    }
    #swipe img {
        width: 100%;
    }
    .search-head {
        width: 100%;
        height: 36px;
        position: absolute;
        top: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .search-left-head {
        background-color:#FFF;
        width: 310px;
        height: 36px;
        border-radius: 4px;
        margin: 0 10px;
        display: flex;
    }
    .search-left-head input {
        flex: 8;
        background:#fff;
        outline:none;
        border:0px;
        font-size: 13px;
        border-radius: 4px;
    }
    .search-left-head .search-city-left-head {
        flex: 2;
        font-size: 14px;
        color: #333;
    }
    .search-left-head .search-city-left-head div {
        width: 80%;
        margin: 8px 0 0 6px;
        border-right: 1px solid #CCC;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #downIcon {
        transform: rotate(90deg);
        color:#999;
        margin-right: 6px;
    }
     .search-right-head {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #FFF;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
     }
     .icon-head {
        width: 100%;
        height: 123px;
     }
    .icon-head #icon-icon {
        height: 100%;
    }
    #siFangBgc {
        background-color: #f6f5f6;
    }
    .si-Room-Team {
        width: 100%;
        height: 190px;
    }
    .si-Room-Team .siList {
        display: flex;
        justify-content: center;
        flex-wrap:wrap;
    }
    .si-Room-Team .siList li {
        width: 172px;
        height: 60px;
        background-color: #fff;
        border-radius: 5px;
        margin: 0 10px 10px 0;
        display: flex;
        justify-content: space-between;
    }
    .si-Room-Team .siList .list-pic-left {
        height: 50px;
        width: 50px;
        margin: 0 10px;
        margin: 10px 0 0 12px;
    }
    .si-Room-Team .siList .list-pic-left img {
        width: 100%;
        height: 100%;
    }
    .si-Room-Team .siList  li .list-pic-right {
         display: flex;
         flex-direction: column;
    }
    .si-Room-Team .siList  li .list-pic-right span {
        margin: 10px 16px 5px 0px;
        font-size: 14px;
        color: #333;
    }
    .si-Room-Team .siList  li .list-pic-right i {
        font-size: 12px;
        color: #333;
    }
</style>
